<template>
  <view
    class="cart"
    v-if="cart.length > 0"
  >
    <view
      class="cart-left"
      @click="toggleCart"
    >
      <image
        class="cart-left-image"
        src="/static/images/menu/cart.png"
      />
      <view class="cart-count">{{ cartTotalQuantity }}</view>
    </view>
    <view class="cart-right">
      <text>合计￥</text>
      <text class="cart-price">{{ cartTotalPrice }}</text>
      <view
        class="cart-paybtn"
        @click="toSettlement"
      >
        去结算
      </view>
    </view>

    <!-- 自定义弹窗 -->
    <view
      v-if="showCart"
      class="custom-popup-mask"
      @click="closePopup"
    ></view>
    <view
      v-if="showCart"
      class="custom-popup"
    >
      <view class="cart-detail">
        <view class="cart-header">
          <view class="cart-title">已选商品</view>
          <view
            class="d-flex-row-y-center"
            @click.stop="handleClear"
          >
            <uni-icons
              type="trash"
              size="16"
              color="#AAAAAA"
            />
            <text class="text-sm text-color-grey">清空</text>
            <uni-popup
              ref="clearCartDialog"
              type="dialog"
            >
              <uni-popup-dialog
                type="info"
                cancelText="我再想想"
                confirmText="确定"
                content="确认清空购物车吗？"
                @confirm="clearCartConfirm"
                @close="clearCartClose"
              ></uni-popup-dialog>
            </uni-popup>
          </view>
        </view>
        <scroll-view
          scroll-y
          class="cart-scroll-view"
        >
          <view class="cart-wrapper">
            <view
              v-for="(item, index) in cart"
              :key="index"
              class="cart-item"
            >
              <image
                class="cart-item-image"
                :src="item.productLogo"
              />
              <view class="cart-item-info">
                <text class="cart-item-name">
                  {{ item.productName }}
                </text>
                <view class="cart-item-attr">
                  {{ item.attrAndSpecText }}
                </view>
                <view class="cart-item-actions">
                  <view class="cart-item-actions-left">
                    <text>￥</text>
                    <text class="cart-item-price">
                      {{ item.productPrice }}
                    </text>
                  </view>
                  <view class="cart-item-actions-right">
                    <uni-icons
                      type="minus"
                      size="26"
                      color="#E60012"
                      @tap="minus(index)"
                    />
                    <view>{{ item.quantity }}</view>
                    <image
                      class="cart-item-plus-icon"
                      src="/static/images/menu/plus.png"
                      @tap="add(index)"
                    />
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState, mapGetters, mapActions } from "vuex"

export default {
  data() {
    return {}
  },
  computed: {
    ...mapState("menu", ["cart", "showCart"]),
    ...mapGetters("menu", ["cartTotalPrice", "cartTotalQuantity"])
  },
  methods: {
    ...mapActions("menu", ["minusQuantity", "addQuantity", "clearCart"]),
    toggleCart() {
      this.$store.commit("menu/SET_SHOW_CART", !this.showCart)
    },
    closePopup() {
      this.$store.commit("menu/SET_SHOW_CART", false)
    },
    minus(index) {
      this.minusQuantity(index)
    },
    add(index) {
      this.addQuantity(index)
    },
    handleClear() {
      this.$refs.clearCartDialog && this.$refs.clearCartDialog.open()
    },
    clearCartConfirm() {
      this.clearCart()
      this.closePopup()
    },
    clearCartClose() {
      this.$refs.clearCartDialog.close()
    },
    toSettlement() {
      uni.navigateTo({
        url: "/pages/order-subs/settlement"
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.cart {
  width: 750rpx;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 $uni-spacing-row-base;
  z-index: 11;

  &-left {
    position: relative;
    &-image {
      width: 62rpx;
      height: 73rpx;
    }
  }

  &-count {
    position: absolute;
    z-index: 2;
    top: -6rpx;
    right: -30rpx;
    font-size: $uni-font-size-xs;
    font-weight: 500;
    color: #fff;
    padding: $uni-spacing-row-xs;
    border-radius: 100%;
    background-color: #ff9f00;
    width: 40rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-right {
    display: flex;
    align-items: center;
    justify-content: center;
    color: $uni-text-color;
    font-size: $uni-font-size-base;
  }

  &-paybtn {
    width: 200rpx;
    height: 80rpx;
    background: $uni-color-primary;
    color: #fff;
    font-size: $uni-font-size-lg;
    font-weight: 400;
    border-radius: $uni-border-radius-lg;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-price {
    padding: 0 $uni-spacing-row-base 0 $uni-spacing-row-sm;
    font-size: $uni-font-size-lg;
    font-weight: 600;
  }
}

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $uni-spacing-row-lg;
}

.cart-title {
  font-size: $uni-font-size-lg;
  font-weight: 600;
  color: $uni-text-color;
}

/* 自定义弹窗样式 */
.custom-popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(var(--window-bottom) + 99rpx);
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.custom-popup {
  position: fixed;
  bottom: calc(var(--window-bottom) + 99rpx);
  left: 0;
  right: 0;
  background-color: #fff;
  border-radius: $uni-border-radius-xxl $uni-border-radius-xxl 0 0;
  z-index: 11;
}

.cart-scroll-view {
  width: 750rpx;
  max-height: 60vh;
}

.cart-wrapper {
  display: flex;
  flex-direction: column;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: $uni-spacing-row-lg;

  &-image {
    width: 140rpx;
    height: 140rpx;
    margin-right: $uni-spacing-row-lg;
  }

  &-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: $uni-spacing-row-base;
  }

  &-name {
    font-size: $uni-font-size-lg;
    font-weight: 500;
    color: $uni-text-color;
  }

  &-attr {
    font-size: $uni-font-size-sm;
    font-weight: 400;
    color: $uni-text-color-secondary;
  }

  &-price {
    font-size: $uni-font-size-lg;
    font-weight: 600;
    color: $uni-text-color;
  }

  &-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-right {
      display: flex;
      align-items: center;
      gap: $uni-spacing-row-lg;
      font-size: $uni-font-size-sm;
      color: $uni-text-color;
    }
  }

  &-plus-icon {
    width: 50rpx;
    height: 50rpx;
  }
}

::v-deep {
  .uni-dialog-button-text {
    color: $uni-text-color-secondary;
  }
  .uni-button-color {
    color: $uni-color-primary;
  }
  .uni-dialog-content-text {
    color: $uni-text-color;
  }
}
</style>
